<template>
  <el-dialog title="订单详情" :visible.sync="dialogVisible" width="30%">
    <h3>卡详情：</h3>
    <p>购买名称：{{ detail.cardName }}</p>
    <p>使用场馆：中正运动会所</p>
    <p>使用场区：{{ detail.regionName }}</p>

    <h3>会员信息:</h3>
    <p>会员名/姓名：{{ detail.memberName }}</p>
    <p>会员ID：{{ detail.platformMemberId }}</p>
    <p>手机号：{{ detail.phone }}</p>

    <h3>订单信息:</h3>
    <p>订单号：{{ detail.orderNumber }}</p>

    <p>订单状态：{{ setOrderStatusTxt(detail.orderStatus) }}</p>
    <p>购买张数：{{ detail.cardCount }}</p>

    <p>支付方式：{{ setPayTypeTxt(detail.payType) }}</p>
    <p>第三方订单号：{{ detail.outTradeNo }}</p>
    <p>优惠金额：{{ detail.activityReduction }}</p>
    <p>订单价格：￥{{ detail.orderAmount }}</p>
    <p>创建时间：{{ detail.createTime }}</p>
    <p>支付时间：{{ detail.payTime }}</p>
    <span slot="footer" class="dialog-footer">
      <!-- <el-button
        type="primary"
        size="small"
        @click="confirmOrder"
        v-if="detail.payStatus == '待支付'"
        >确认收款</el-button
      > -->
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { cardOrderDetail } from '@/config/api'
import { times, divide } from "@/utils/tools"

export default {
  data () {
    return {
      dialogVisible: false,
      detail: {}
    };
  },
  methods: {
    show (id) {
      this.getDeta(id)
      this.dialogVisible = true
    },
    getDeta (id) {
      cardOrderDetail({ id }).then(res => {
        res.data.result.orderAmount = divide(res.data.result.orderAmount || 0, 100)
        res.data.result.amount = divide(res.data.result.amount || 0, 100)
        res.data.result.redPackedAmount = divide(res.data.result.redPackedAmount || 0, 100)
        res.data.result.activityReduction = divide(res.data.result.activityReduction || 0, 100)
        this.detail = res.data.result
      })
    },
    // 获取支付方式文字
    setPayTypeTxt (payType) {
      let str = ""
      switch (payType) {
        case "1":
          str = "支付宝"
          break;
        case "2":
          str = "微信"
          break;
        case "3":
          str = "银联"
          break;
        case "4":
          str = "余额"
          break;
        case "5":
          str = "现金"
          break;
        case "7":
          str = "礼品卡"
          break;
      }
      return str;
    },
    // 获取订单状态文案
    setOrderStatusTxt (orderStatus) {
      let str = ""
      switch (orderStatus) {
        case "1":
          str = "已完成"
          break;
        case "2":
          str = "待支付"
          break;
        case "3":
          str = "取消支付"
          break;
        case "4":
          str = "退款"
          break;
      }
      return str;
    },
  }
};
</script>
<style scoped>
p {
  margin: 15px 0;
}
</style>